<template>
  <div class="modi-address">
    <!-- <HeaderTop title="修改地址"></HeaderTop> -->
    <van-address-edit
      class="oneAddress"
      :area-list="areaList"
      :address-info="oneAddress"
      show-delete
      show-set-default
      @save="onSave"
      @delete="onDelete"
    />
  </div>
</template>

<script>
// import HeaderTop from '../HeaderTop/HeaderTop'
import areaListInfo from '../../common/js/area.js'
import PubSub from 'pubsub-js'
import {mapState} from 'vuex'

export default {
  data () {
    return {
      areaList:areaListInfo,
      oneAddress:{},
    };
  },

  // components: {
  //   HeaderTop,
  // },

  computed: {
    ...mapState(['userInfo','addressList']),
  },
  created(){
    this.userId = this.userInfo.userInfo.id
    this.token = this.userInfo.token
    this.addressId = this.$route.query.id
    console.log(this.addressId)
    console.log(this.addressList)
    this.addressList.forEach(item=>{
      if(item.id === this.addressId){
        this.oneAddress.name = item.consignee
        this.oneAddress.tel = item.mobile
        this.oneAddress.addressDetail = item.address
        this.oneAddress.areaCode = item.areaCode
        this.oneAddress.isDefault = item.ifDefault == 0 ? true : false
        console.log(this.oneAddress)
      }
    })
  },
  methods: {
    async onSave(e) {
      console.log(e)
      const consignee = e.name
      const mobile = e.tel
      const area = e.province
      const address = e.addressDetail
      const city = e.city
      const county = e.county
      const areaCode = e.areaCode
      const ifDefault = e.isDefault == true ? 0 : 1
      const result = await this.API.reqaddAddress({userId:this.userId,token:this.token,consignee,mobile,area,address,code:2,city,county,areaCode,id:this.addressId,ifDefault})
      console.log(result)
      if(result.retCode === '000'){
        this.$toast('地址修改成功');
        this.$router.replace('/addresslist')
      }else{
        this.$toast(result.retMsg);        
      }
    },
    async onDelete(e) {
      console.log(e)
      const {userId,token,addressId} = this
      const result = await this.API.reqdelAddress({userId,token,addressId})
      if(result.retCode === '000'){
        this.$toast('地址删除成功');
        this.$router.replace('/addresslist')
      }else{
        this.$toast(result.retMsg);        
      }
    },
    showAddress(){
      this.addressList.forEach(item=>{
        console.log(item)
      })
    }
  }
}

</script>
<style lang='stylus'>
.oneAddress
  .van-cell
    padding-left 20px
  .van-address-edit-detail
    .van-cell__value
      .van-cell
        padding-left 0
  .van-switch-cell
    .van-cell__value
      .van-switch--on
        background-color #145B3E
  .van-button--danger
    border none 
    background #145B3E
</style>

<style lang='stylus' scoped>
@import "../../common/stylus/mixins.styl"
.modi-address
  // margin-top 45px
  padding-bottom 0 !important
  background #fff
  width 100%
  height 100%
</style>